<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui-win.css" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css" />
		<style type="text/css">
			.aui-bar-1d9dd5 {
				background: #4385f6;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav aui-bar-1d9dd5" id='aui-header'>
			<a class="aui-pull-left" tapmode onclick="H.$closeCurrentWin();"> <span class="aui-iconfont aui-icon-left"></span>返回 </a>
			<div class="aui-title">
				点点例
			</div>
			<a class="aui-pull-right" > <span class="aui-iconfont iconfont icon-user_set"></span> </a>
		</header>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript">
		var UIChatBox = null;
		// 重置frame高度
		function resetFrameHeight(inputBarHeight, panelHeight) {
			H.$fixStatusBar(function(offset) {
				H.setFrameAttr({
					name : 'chat_msg_body',
					rect : {
						x : 0,
						y : offset.h,
						w : api.winWidth,
						h : api.winHeight - offset.h - inputBarHeight - panelHeight
					},
					bounces : false,
					vScrollBarEnabled : false,
					hScrollBarEnabled : false
				});
			}, 'aui-header');
			setTimeout(function() {
				H.$execScript(null, 'chat_msg_body', 'H.$com.scrollToDocButton();');
			}, 200);
		}


		H.ready(function() {
			// 引入模块
			H.$require("UIChatBox");
			UIChatBox = H.$module.UIChatBox;
			// 打开窗口
			H.$fixStatusBar(function(offset) {
				H.$openFrame('chat_msg_body', 'chat_msg_body.html', {}, {
					x : 0,
					y : offset.h,
					w : api.winWidth,
					h : api.winHeight - offset.h - (H.isIOS() ? 50 : 34)
				})
			}, 'aui-header');
			// ####################### 聊天组件
			UIChatBox.open({
				placeholder : '',
				maxRows : 4,
				emotionPath : 'widget://res/chatBox/emotion',
				texts : {
					recordBtn : {
						normalTitle : '按住 说话',
						activeTitle : '松开 结束'
					},
					sendBtn : {
						title : "send"
					}
				},
				styles : {
					inputBar : {
						borderColor : '#d9d9d9',
						bgColor : '#f2f2f2'
					},
					inputBox : {
						borderColor : '#B3B3B3',
						bgColor : '#FFFFFF'
					},
					emotionBtn : {
						normalImg : 'widget://res/chatBox/chatBox_face1.png'
					},
					extrasBtn : {
						normalImg : 'widget://res/chatBox/chatBox_add1.png'
					},
					keyboardBtn : {
						normalImg : 'widget://res/chatBox/chatBox_key1.png'
					},
					speechBtn : {
						normalImg : 'widget://res/chatBox/chatBox_key1.png'
					},
					recordBtn : {
						normalBg : '#c4c4c4',
						activeBg : '#999999',
						color : '#000',
						size : 14
					},
					indicator : {
						target : 'both',
						color : '#c4c4c4',
						activeColor : '#9e9e9e'
					},
					sendBtn : {
						titleColor : '#4cc518',
						bg : '#999999',
						activeBg : '#46a91e',
						titleSize : 14
					}
				},
				extras : {
					titleSize : 10,
					titleColor : '#a3a3a3',
					btns : [{
						title : '图片',
						normalImg : 'widget://res/chatBox/chatBox_album1.png',
						activeImg : 'widget://res/chatBox/chatBox_album2.png'
					}, {
						title : '拍照',
						normalImg : 'widget://res/chatBox/chatBox_cam1.png',
						activeImg : 'widget://res/chatBox/chatBox_cam2.png'
					}]
				}
			}, function(ret, err) {
				if (ret) {
				} else {
				}
			});
			// 监听输入框的变化，动态调整frame高度
			//1.0 输入框所在区域弹动事件
			UIChatBox.addEventListener({
				target : 'inputBar',
				name : 'move'
			}, function(ret, err) {
				if (ret) {
					//输入框及左右按钮整体区域的高度
					var inputBarHeight = ret.inputBarHeight;
					// 输入框下边缘距离屏幕底部的高度
					var panelHeight = ret.panelHeight;
					resetFrameHeight(inputBarHeight, panelHeight);
				}
			});
			//2.0 输入框所在区域高度改变
			UIChatBox.addEventListener({
				target : 'inputBar',
				name : 'change'
			}, function(ret, err) {
				if (ret) {
					//输入框及左右按钮整体区域的高度
					var inputBarHeight = ret.inputBarHeight;
					// 输入框下边缘距离屏幕底部的高度
					var panelHeight = ret.panelHeight;
					resetFrameHeight(inputBarHeight, panelHeight);
				}
			});
		});
	</script>
</html>